<!DOCTYPE html>
<html>

<head>
    <title>临时</title>
</head>

<body>
    <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <a href="#" id="fileSelect">选择文件</a>
    <div id="fileList">
        <p>No files selected!</p>
    </div>
    <!-- 使用url对象来显示图像 -->
    <!-- 文件上传 -->
    <script type="text/javascript">
    window.URL = window.URL || window.webkitURL;

    // 选择文件按钮
    var fileSelect = document.getElementById("fileSelect"),
        // 文件input
        fileElem = document.getElementById("fileElem"),
        // 结果回显
        fileList = document.getElementById("fileList");

    fileSelect.addEventListener("click", function(e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);

    function handleFiles(files) {
        if (!files.length) {
            fileList.innerHTML = "<p>No files selected!</p>";
        } else {
            fileList.innerHTML = "";
            var list = document.createElement("ul");
            fileList.appendChild(list);
            for (var i = 0; i < files.length; i++) {
                var li = document.createElement("li");
                list.appendChild(li);

                 
                var img = document.createElement("img");
                img.src = window.URL.createObjectURL(files[i]); 
                img.height = 60; 
                img.onload = function() {
                    window.URL.revokeObjectURL(this.src); 
                } 
                li.appendChild(img); 
                var info = document.createElement("span"); 
                info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; 
                li.appendChild(info); 
            } 
        }
    }
    </script>
</body>

</html>